MVC6 TagHelpers整合到了MVC版本

MVC6 TagHelpers 随着ComponentOne Studio 2015 V2版本一起发布了,所以您现在就可以使用它的新功能了。TagHelpers和web指令很相似,例如JavaScript脚本里的Angular扩展了HTML属性,这和ASPNET5很相似。现在可以使用HTML帮助器来简化扩展语义标记。例如,参考下面的情景:

发布于 2015/08/05 00:00

WijmoJS

MVC6 TagHelpers 随着ComponentOne Studio 2015 V2版本一起发布了,所以您现在就可以使用它的新功能了。

TagHelpers和web指令很相似,例如JavaScript脚本里的Angular扩展了HTML属性,这和ASPNET5很相似。现在可以使用HTML帮助器来简化扩展语义标记。例如,参考下面的情景:

在ASPNET MVC中使用FlexGrid ,当前我们使用的razor 语法如下:

@(Html.C1().FlexGrid()
 
.AutoGenerateColumns(false)
 
.CssClass("grid")
 
.IsReadOnly(true)
 
.Columns(columns =>
 
{
 
columns.Add(column => column.Binding("Start").Width("80").MaxWidth(160).MinWidth(40));
 
columns.Add(column => column.Binding("Product").Width("2*").AllowResizing(false));
 
columns.Add(column => column.Binding("Amount").Format("c"));
 
columns.Add(column => column.Binding("Amount2").Format("c"));
 
})
 
.Bind(Model)
 
)

现在来看下使用Taghelpers 后的句法:

<c1-flex-grid class="grid" auto-generate-columns="false" is-read-only="true"> 
 
<c1-flex-grid-column binding="Start" width="80" max-width="160" min-width="40"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Product" width="2*" allow-resizing="false"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> 
 
<c1-items-source read-action-url="@Url.Action("StarSizing_Bind")"></c1-items-source> 
 
</c1-flex-grid> 

上面的代码看起来像使用了标记语言。这就是TagHelpers 优秀之处:简洁且便于理解。加上它对完整的IntelliSense的支持,编写razor代码就变得十分轻松愉快。我们来看看使用了模板的其他例子。假如我们需要显示下拉框自定义项目,可以编写如下razor代码:

@(Html.C1().ComboBox()
 
.Bind(Model)
 
.DisplayMemberPath("Name")
 
.SelectedValuePath("Value")
 
.ItemTemplateId("template1")

 

在“template1”分别定义为:

<script id="template1" type="text/template">// <![CDATA[
 
<span>
 
<span class="palette" style="background-color: {{Value}}"></span>
 
<span class="label">{{Name}}</span>
 
</span>
 
// ]]></script>

同样的代码使用Taghelpers后将会如下所示:

<c1-combo-box display-member-path="Name" selected-value-path="Value"> 
 
<c1-input-item-template> 
 
<span> 
 
<span class="palette" style="background-color: {{Name}}"></span> 
 
<span class="label">{{Name}}</span> 
 
</span> 
 
</c1-input-item-template> 
 
<c1-items-source source-collection="@Model"></c1-items-source> 
 
</c1-combo-box> 

正如我们看到的那样,只需几行代码,模板定义就内联且自然。从2015 V2版本开始我们的所有MVC版控件都支持TagHelper。ASPNET5中的控件的核心是CLR,因此,控件能够跨平台工作。

2015 v2发布后,MVC版本控件兼容了MVC6和TagHelpers Beta版。微软发布ASPNET5 RC\RTM后,我们很快也会让这些控件和ASPNET5 RTM兼容。

敬请期待更多喜讯

2015 v2发布后,MVC版FlexChart 中的TrendLines, RangeSelector 以及新版本的Web API您就可以开始使用了。

 

 

GCDNhttp://gcdn.grapecity.com.cn/

官方网站/developer

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包,由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成,如表格(Grid)、图表(Chart)、数据分析(Olap)、导航(Navigation)和金融图表等,完美兼容原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型,推荐如下方式,加速产品评估进度:

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态